<template>
    <el-menu class="aside-menu" router :default-active="activeMenu" :default-openeds="openedsArr" :collapse="store.isCollapsed" :collapse-transition="false">
        <comp-sub-menu :menuData="menuData"></comp-sub-menu>
    </el-menu>
</template>

<script setup>
import CompSubMenu from "./CompSubMenu.vue";
import {useCollapsedStore} from '@/stores/collapsed';
import {computed} from "vue";
import {useRouter} from "vue-router";

const store = useCollapsedStore()

const router = useRouter();
const props = defineProps({
    menuData: {
        type: Array,
        default: [],
    },
});

const openedsArr = props.menuData.map((item) => {
    return item.path;
});

const activeMenu = computed(() => {
    const {meta, path} = router.currentRoute.value;
    if (meta.matchPath2) {
        return meta.matchPath2;
    } else {
        return path;
    }
});
</script>

<style scoped>
.aside-menu {
    /*width: 100%;*/
    height: 100%;
    overflow-y: auto;
}
</style>